<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import SearchView from '@/components/SearchView.vue'
import { Download } from '@element-plus/icons-vue'
import BlocksTable from './blocksTable.vue'
import Pagination from '@/components/table/pagination.vue'
import { useRouter } from 'vue-router'
import { onDownload } from '@/utils/util'
import { math } from '@/utils/util'

const { proxy } = getCurrentInstance()
const router = useRouter()

const blocksList = ref([]);
const totalCount = ref(0);
const pageNo = ref(1);
const isInit = ref(true);
const pageSize = ref(10)
const loadingtx = ref(true)
const totalPage = ref('')

onMounted(() => {
  if (localStorage.getItem('pageSizeblocks')) {
    pageSize.value = parseInt(localStorage.getItem('pageSizeblocks'))
  }

  getBlocks()
})

const getBlocks = () => {
  var url = "api/Scan/Blocks"
  var param = {
    "pageNo": pageNo.value,
    "pageSize": pageSize.value,
  }
  proxy.$axios.post(url, param).then((res) => {
    setTimeout(() => {
      loadingtx.value = false
    }, 500)
    if (res.code == "Success") {
      blocksList.value = res.data.list
      totalPage.value = res.data.totalPage
      totalCount.value = res.data.totalCount
    }
  })
}

const handleSizeChange = (e) => {
  loadingtx.value = true
  pageSize.value = e
  pageNo.value = 1
  getBlocks()
  localStorage.setItem('pageSizeblocks', e)
  console.log(e);
}

const update = (e) => {
  loadingtx.value = true
  pageNo.value = e;
  getBlocks()
}

</script>
<template>
  <div class="txs_box bg_box">
    <div class="container">
      <SearchView>
        <div class="s_tit">
          <h3>Blocks</h3>
          <span v-if="blockNumber">For Block <router-link :to="'/block/' + blockNumber">
              {{ blockNumber }}</router-link></span>
        </div>
      </SearchView>
      <el-row class="t_info row" justify="space-between" :gutter="20">
        <el-col :md=6>
          <dl>
            <dt>NETWORK UTILIZATION (24H)</dt>
            <dd>0%</dd>
          </dl>
        </el-col>
        <el-col :md=6>
          <dl>
            <dt>Block size (24H)</dt>
            <dd>847 Bytes</dd>
          </dl>
        </el-col>
        <el-col :md=6>
          <dl>
            <dt>Block rewards (24H)</dt>
            <dd>1.86 TOK</dd>
          </dl>
        </el-col>
        <el-col :md=6>
          <dl>
            <dt>Burnt FEES 🔥</dt>
            <dd>6,011.62 TOK</dd>
          </dl>
        </el-col>
      </el-row>

      <div class="table_box">
        <el-row>
          <el-col :md=12>
            <div class="records">Total of {{ math(totalCount) }} blocks
              <p class="c999" v-if="blocksList.length > 0">(Showing blocks between #{{ blocksList[blocksList.length -
                1].blockNumber
              }} to
                #{{ blocksList[0]?.blockNumber }})</p>
            </div>
          </el-col>
          <el-col :md=12 v-if="blocksList && blocksList.length > 0">
            <div class="plugin">
              <button @click="onDownload(blocksList, 'blocks')">
                <el-icon>
                  <Download />
                </el-icon>
                <span>Download Page Data</span>
              </button>
              <Pagination :pageNo="pageNo" :totalPage="totalPage" @setPage="update" />
            </div>

          </el-col>
        </el-row>
        <el-skeleton :rows="5" :loading="loadingtx" animated>
          <BlocksTable :blocksList="blocksList" />
        </el-skeleton>
        <el-row class="bt_row">
          <el-col :md=12>
            <div class="pagination">
              <el-pagination v-if="totalCount && totalCount > 10" @size-change="handleSizeChange"
                :page-sizes="[10, 20, 50]" :page-size="pageSize" v-model:currentPage="pageNo" layout="sizes"
                :total="totalCount">
              </el-pagination>
            </div>
          </el-col>
          <el-col :md=12>
            <div class="plugin">
              <Pagination :pageNo="pageNo" :totalPage="totalPage" @setPage="update" />
            </div>

          </el-col>
        </el-row>
      </div>
      <div class="tips">
        <img src="../../assets/img/tips.png" alt="" />
        <p>Blocks are batches of transactions linked together via cryptographic hashes. Any tampering of a block
          invalidates subsequent blocks as their hashes would be changed. Learn more about this page in our Knowledge
          Base.</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-table--fit .el-table__inner-wrapper:before {
  display: none;
}

.t_info {
  margin: 18px 0 0;

  dl {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0px 4px 10px 2px rgba(242, 242, 247, 0.5);
    border: 1px solid #F2F2F7;
    margin-bottom: 15px;

    dt {
      color: #8F9399;
      font-size: 12px;
      font-weight: normal;
      // padding-bottom: 10px;
      text-transform: uppercase;
    }

    dd {
      font-size: 22px;

      i {
        font-size: 12px;
        color: var(--primary-color);
        padding-left: 5px;
      }
    }
  }
}

.table_box {
  font-size: 0.75rem;
  color: var(--color-text);

  :deep(.el-table__inner-wrapper:before) {
    display: none !important;
  }


  .el-row {
    margin-bottom: 20px;
  }

  .bt_row {
    margin-top: 1rem;
    margin-bottom: 0;
  }


  .records {
    font-size: 0.9rem;

    p {
      font-size: 0.8rem;
      color: var(--color-text2);
    }
  }


}



@media (min-width: 1000px) {}
</style>
